<script setup lang="ts">
import { Page, useVbenForm, useVbenModal } from '@vben/common-ui';
import { useUserStore } from '@vben/stores';

import { Button, message, Space } from 'ant-design-vue';

import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { addAgent, getAgentList } from '#/api/core/popularize';

function isObject(value) {
  return value?.constructor === Object;
}
const userStore = useUserStore();

const user = computed((): any => {
  return userStore.userInfo;
});

const gridOptions: VxeGridProps = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'shopName', title: '店铺名称' },
    { field: 'linkCode', title: '链接' },
  ],
  editConfig: {
    mode: 'row',
    trigger: 'click',
  },
  height: 'auto',
  keepSource: true,
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    response: {
      result: 'data',
    },
    ajax: {
      query: async () => {
        const res = await getAgentList({
          id: user.value.id,
        });
        if (Array.isArray(res.data)) {
          return res.data || [];
        } else if (isObject(res.data)) {
          return [res.data];
        } else {
          return res.data;
        }
      },
    },
  },
  showOverflow: false,
  toolbarConfig: {
    custom: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
function onRefresh() {
  gridApi.query();
}

const [BaseForm, baseFormApi] = useVbenForm({
  // 默认展开
  collapsed: false,
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    colon: true,
    // 所有表单项
    componentProps: {
      class: 'w-[80%]',
    },
  },
  showDefaultActions: false,
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      fieldName: 'shopName',
      rules: 'required',
      label: '店铺名称',
    },
    {
      component: 'Input',
      fieldName: 'linkCode',
      rules: 'required',
      label: '链接地址',
    },
  ],

  wrapperClass: 'grid-cols-1',
});
const [Modal, modalApi] = useVbenModal({
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    modalApi.setState({
      confirmLoading: true,
    });
    baseFormApi
      .validateAndSubmitForm()
      .then((val) => {
        if (val) {
          const param: any = {
            ...val,
            id: user.value.id,
          };
          delete param.picture;
          addAgent(param).then((res) => {
            if (res.success === true) {
              message.success('添加成功');
              modalApi.close();
              onRefresh();
            } else {
              message.error(res.msg);
            }
          });
        }
      })
      .finally(() => {
        modalApi.setState({
          confirmLoading: false,
        });
      });
  },
});

function addGoods() {
  modalApi.open();
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <Space>
          <Button type="primary" @click="addGoods"> 添加链接 </Button>
        </Space>
      </template>
    </Grid>
    <Modal class="w-[40vw]" title="新增链接">
      <BaseForm />
    </Modal>
  </Page>
</template>

<style lang="scss" scoped></style>
